<template>
  <div class="page">
    <div class="weui-grids">
      <block v-for="(item, index) in grids" :key="index">
        <navigator :url="item.link" class="weui-grid card-shadow" hover-class="weui-grid_active">
          <i :class="['icon', item.icon]"></i>
          <i :class="['icon', 'icon-1', item.icon1]"></i>
          <div class="weui-grid__label">{{item.name}}</div>
          <div class="note">{{item.note}}</div>
        </navigator>
      </block>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    const introduce = '/pages/puerperaIntroduce/main'
    return {
      grids: [
        { icon: 'icon-kr', icon1: 'icon-kr-1', name: '开乳', note: '孕期跟踪，母乳喂养', link: `${introduce}?type=kr` },
        { icon: 'icon-cr', icon1: 'icon-cr-1', name: '催乳', note: '手法催乳，轻柔无痛', link: `${introduce}?type=cr` },
        { icon: 'icon-myh', icon1: 'icon-myh-1', name: '满月汗', note: '排湿驱寒，增强免疫', link: `${introduce}?type=myh` },
        { icon: 'icon-chxf', icon1: 'icon-chxf-1', name: '产后修复', note: '缓解阴道松弛和子宫脱垂', link: `${introduce}?type=chxf` },
        { icon: 'icon-yezs', icon1: 'icon-yezs-1', name: '育儿知识', note: '科学护理，护航宝宝健康', link: `${introduce}?type=yezs` },
        { icon: 'icon-myz', icon1: 'icon-myz-1', name: '满月照', note: '经典影像，定格美好瞬间', link: `${introduce}?type=myz` }
      ]
    }
  },
  methods: {

  }
}
</script>
<style lang="less">
  .weui-grids{
    padding: 20px 15px;
  }
  .weui-grid{
    width: 48%;
    border: none;
    height: 180px;
    margin-bottom: 15px;
    text-align: center;
    border-radius: 4px;
    .icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-top: 15px;
      margin-bottom: 15px;
    }
    .icon-1{
      display: none;
      background-color: #71a0fe;
    }
    .icon-kr, .icon-kr-1{
      background-size: 25px 36px;
    }
    .icon-kr{
      background-color: rgba(138, 47, 250, 0.2);
    }
    .icon-cr, .icon-cr-1{
      background-size: 30px 32px;
    }
    .icon-cr{
      background-color: #fff2f2;
    }
    .icon-myh, .icon-myh-1{
      background-size: 35px 27px;
    }
    .icon-myh{
      background-color: #e7f1fc;
    }
    .icon-chxf, .icon-chxf-1{
      background-size: 30px 26px;
    }
    .icon-chxf{
      background-color: #fef6e3;
    }
    .icon-yezs, .icon-yezs-1{
      background-size: 28px 27px;
    }
    .icon-yezs{
      background-color: #f2eaff;
    }
    .icon-myz, .icon-myz-1{
      background-size: 30px 25px;
    }
    .icon-myz{
      background-color: #ebffea;
    }
    &.weui-grid_active {
      color: #fff;
      background-image: linear-gradient( 90deg, rgb(60,87,250) 0%, rgb(49,134,255) 100%);
      .weui-grid__label{
        color: #fff;
      }
      .icon{display: none;}
      .icon-1{display: inline-block;}
    }
  }
  .weui-grid:nth-child(even){
    margin-left: 4%;
  }
</style>